<template>
  <div class="trend-charts">
    <el-row :gutter="20">
      <!-- 时间折线图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>问题趋势</span>
              <el-icon><TrendChartsIcon /></el-icon>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="timeSeriesOption" autoresize />
          </div>
        </el-card>
      </el-col>

      <!-- 型号分布（默认饼图，可切换柱形图） -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>型号分布</span>
              <div>
                <el-button size="small" @click="toggleModelChartType">{{ modelChartType === 'pie' ? '柱形图' : '饼状图' }}</el-button>
                <el-icon style="margin-left: 8px"><DataBoard /></el-icon>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <v-chart class="chart" :option="modelStackOption" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 底部区域（默认显示问题热力图，可被外部插槽替换为其它内容） -->
    <slot name="bottom">
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>问题热力图</span>
                <el-icon><Grid /></el-icon>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="heatmapOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </slot>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { TrendCharts as TrendChartsIcon, DataBoard, Grid } from '@element-plus/icons-vue'

const anrStore = useAnrStore()
const { trendData } = storeToRefs(anrStore)

// Time series option
const timeSeriesOption = computed(() => {
  const data = (trendData.value && trendData.value.timeSeries) || {}
  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
    legend: { data: data.legend || [] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', boundaryGap: false, data: data.xAxis || [] },
    yAxis: { type: 'value' },
    series: data.series || []
  }
})

// 型号分布：默认饼图，按钮切换柱形图
const modelChartType = ref('pie')
const toggleModelChartType = () => {
  modelChartType.value = modelChartType.value === 'pie' ? 'bar' : 'pie'
}

const modelStackOption = computed(() => {
  const data = (trendData.value && trendData.value.modelStack) || {}
  if (modelChartType.value === 'pie') {
    const items = (data.series || []).map(s => {
      const arr = Array.isArray(s.data) ? s.data : []
      const total = arr.reduce((acc, v) => acc + (Number(v) || 0), 0)
      return { name: s.name, value: total }
    })
    return {
      tooltip: {
        trigger: 'item',
        formatter: (p) => `${p.name}: ${p.value} (${p.percent?.toFixed ? p.percent.toFixed(1) : p.percent}%)`
      },
      legend: { type: 'scroll' },
      series: [ {
        name: '型号分布',
        type: 'pie',
        radius: '65%',
        label: {
          show: true,
          formatter: (p) => `${p.name}: ${p.value} (${p.percent?.toFixed ? p.percent.toFixed(1) : p.percent}%)`
        },
        labelLine: { show: true },
        data: items
      } ]
    }
  }
  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { data: data.legend || [] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: data.xAxis || [] },
    yAxis: { type: 'value' },
    series: data.series || []
  }
})

// Heatmap option
const heatmapOption = computed(() => {
  const data = (trendData.value && trendData.value.heatmap) || {}
  return {
    tooltip: { position: 'top' },
    grid: { height: '50%', top: '10%' },
    xAxis: { type: 'category', data: data.xAxis || [], splitArea: { show: true } },
    yAxis: { type: 'category', data: data.yAxis || [], splitArea: { show: true } },
    visualMap: { min: 0, max: 10, calculable: true, orient: 'horizontal', left: 'center', bottom: '15%' },
    series: data.series || []
  }
})
</script>

<style scoped>
.trend-charts { margin-bottom: 20px; }
.chart-card { height: 400px; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.chart-container { height: 320px; width: 100%; }
.chart { height: 100%; width: 100%; }
</style>
